<template>
  <!-- 修改资料 -->

  <div>
    <!--  v-if="visible"  @click.self="handleClose" -->
    <!-- 内容主题区域 -->
    <ts-card header="基本信息">
      <el-form
        :model="form"
        label-position="right"
        ref="formRef"
        :rules="formRules"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="编号">
              <el-input
                v-model="form.number"
                placeholder="不输入则自动生成"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="客户名称" required>
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="简称" required>
              <el-input v-model="form.forShort"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="目的港" required>
              <el-input v-model="form.destinationPort"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="运输方式" required>
              <el-select
                v-model="form.transport"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.transportList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="国家" prop="countryId">
              <el-select
                v-model="form.countryId"
                clearable
                placeholder="请选择："
                filterable
              >
                <el-option
                  v-for="item in configData.countryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="币种" required>
              <el-select
                v-model="form.currencyId"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.currencyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="付款方式">
              <el-input v-model="form.payMethod"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="地址" required>
              <el-input v-model="form.corpAddress" type="textarea" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="公司电话" prop="corpPhone">
              <el-input v-model="form.corpPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="贸易条款">
              <el-select
                v-model="form.tradeTerms"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.tradeTermsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="业务员">
              <ts-select
                v-model="form.salesId"
                :fileName="saleFileName"
                :template="tableProps"
                 :input-width="500"
                :label="form.salesName"
              ></ts-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="权限人员">
              <sc-table-select
                v-model="authEmployeeIds"
                multiple
                fileName="ChooseEmployeeReport"
                :table-width="700"
                :input-width="500"
                :maxCollapseTags="4"
                :props="tableProps"
              >
              </sc-table-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="状态" prop="status">
              <el-switch
                v-model="form.status"
                size="large"
                inline-prompt
                :active-icon="Check"
                :inactive-icon="Close"
                active-value="normal"
                inactive-value="disable"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ts-card>
    <tsFormCard v-model="addressList" title="联系人" :addTemplate="address" @delete="deleteData">
      <template #headerRight="{ data }">
        <el-switch
          style=""
          v-model="data.item.defaultContact"
          inactive-text="默认联系人"
          @change="handleDefalutContact(data.index, $event)"
        />
      </template>
      <template #content="{ item }">
        <el-form label-width="120px" :model="item" label-position="right">
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="联系人">
                <el-input v-model="item.receiver"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="联系电话">
                <el-input v-model="item.receiverPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="地址">
                <el-input v-model="item.address" type="textarea"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="邮箱">
                <el-input v-model="item.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </tsFormCard>

    <div class="button-position">
      <el-button @click="updateVisible">取 消</el-button>
      <el-button type="primary" @click="updateCust(formRef)">确 定</el-button>
    </div>
  </div>
</template>
  
  <script setup>
import { reactive, ref, onMounted } from "vue";
import { ElNotification } from "element-plus";
import Api from "@/api/model/crm";
import tsFormCard from "@/components/tsFormCard/index.vue";
import tsSelect from "@/components/scSelect/index.vue";
const emit = defineEmits(["updatetable"]);
const props = defineProps({
  paramsData: {
    type: Object,
    defalut: {},
  },
});

const salesRows = ref({});
const saleFileName = ref("ChooseEmployeeReport");
const authEmployeeIds = ref([]);
const tableProps = {
  label: "name",
  value: "id",
};
// 添加用户数据的对象
const form = ref({});
const configData = ref([]);
const addressList = ref([]);
const deleteList = ref([])
const address = ref({});
const formRef = ref();
const formRules = reactive({});

onMounted(() => {
  getInit();
});
const getInit = async () => {
  let res = await Api.cust.detail.post(props.paramsData);
  console.log(res);
  if (res.code == "200") {
    configData.value = res.configData;
    form.value = res.data;
    address.value = res.address;
    addressList.value = res.dataList;
    authEmployeeIds.value = res.data.authEmployeeList;
    salesRows.value = { id: res.data.salesId, name: res.data.salesName };
  }
};

const handleDefalutContact = (index, val) => {
  if (val === true) {
    addressList.value.forEach((ele, index1) => {
      if (index1 !== index) {
        ele.defaultContact = false;
      }
    });
  }
};
const deleteData = (val)=>{
  deleteList.value.push(val)
}
const updateVisible = (val) => {
  emit("updatetable");
};
const updateCust = async (formRef) => {
  await formRef.validate((valid, fields) => {
    if (valid) {
      updateCustData();
    }
  });
};

const updateCustData = async () => {
  // console.log(form.name);
  form.value.authEmployeeIdsArray = authEmployeeIds.value.map((ele) => {
    return ele.id;
  });
  var params = {
    bean: form.value,
    dataList: addressList.value.filter(ele=>{return ele.receiver}).concat(deleteList.value),
  };
  console.log(params);
  var res = await Api.cust.update.post(params);
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "添加成功！",
      duration: 2000,
    });
    emit("updatetable", true);
  }
};
</script>
  <style lang="less" scoped>
:deep(.el-card__header) {
  padding: 10px !important;
  line-height: 22px;
  font-size: 16px;
  height: 45px;
  background: #f6f6f6;
}

.float-right {
  float: right;
}
</style>
  
  
  
  